<!DOCTYPE html>
<html lang="en">
    <head>
    <title>北京</title>
        <meta charset="utf-8">
        <style type="text/css">
        .box{
            width:100px;
            margin:auto;
            text-align: center;
        }
        .box1{
            height: 30px;
         
            background-color:  #FFFFFF;
            line-height: 30px;
            position:absolute;
            z-index: 1;
        }
        .box2{
            height: 150px;
            width:100px;
            background-color: #FFFFFF;
            border:1px solid #EFEFEF;
            position:relative;
            top:-1px;
            left: -5px;
            display:none; 
        }
        .box3{
            height:26px;
            width:61px;
            border: 1px solid #EFEFEF;
            background-color: #fff;
            border-top: 0;
            border-right: 0;
            position:relative;
            top:-153px;
            left:35px;

        }
         .box:hover .box2{
            display:block;
        } 
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">北京</div>
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
        
    </body>
</html>